<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="车主姓名">
        <el-input v-model="searchForm.consumerName" placeholder="请输入车主姓名"></el-input>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="searchForm.licensePlate" placeholder="请输入车牌号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleRestSearch()">重置</el-button>
        <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-end">
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column prop="consumerName" label="车主姓名" />
      <el-table-column prop="phone" label="联系方式" />
      <el-table-column prop="licensePlate" label="车牌号" />
      <el-table-column prop="reservationServer" label="预约服务" />
      <el-table-column prop="arriveTime" label="预约时间" />
      <el-table-column prop="reservationServer" label="备注" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable } from "@/hooks/useCommon";
import { getReserveOrderListApi } from "@/api/repair";
const { searchForm, tableData, limit, total, handleRestSearch, handleGetTableList } = useInitTable({
  searchForm: {
    consumerName: "",
    licensePlate: ""
  },
  getTableList: getReserveOrderListApi
});
</script>
<style scoped lang="scss"></style>
